const PropTypes = require('prop-types');
const React = require('react');
const {
    View,
    StyleSheet,
    ViewPropTypes
} = require('react-native');
const {
    JDRouter
} = require('@areslabs/jdreact-core-lib');
const {NavigationBar} = JDRouter;

class PageContainer extends React.Component {
    static propTypes = {
        renderOverlay: PropTypes.func,
        bodyStyle: ViewPropTypes.style,
    };

    render() {
        return (
            <View style={styles.wrapper}>
                <NavigationBar Title={this.props.title}/>
                <View style={[styles.body, this.props.bodyStyle]}>
                    { this.props.children }
                </View>
                {this._renderOverlay()}
            </View>
        );
    }

    _renderOverlay = () => {
        if (typeof this.props.renderOverlay === 'function') {
            return this.props.renderOverlay();
        }
        return null;
    };
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        backgroundColor: '#F3F4F7'
    },
    body: {
        flex: 1,
    },
});

module.exports = PageContainer;
